<template>
  <div class="singer">
    <!-- 分类 -->
    <div class="top-category w">
      <div class="singer-area">
        <ul>
          <li
            v-for="(item, index) in areaList"
            :key="index"
            @click.stop="selectArea(item, index)"
            :class="{ active: areaIndex === index }"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="singer-gender">
        <ul>
          <li
            v-for="(item, index) in genderList"
            :key="index"
            @click.stop="selectGender(item, index)"
            :class="{ active: genderIndex === index }"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="initial-list">
        <ul>
          <li
            v-for="(item, index) in initialList"
            :key="index"
            @click.stop="selectInitial(item, index)"
            :class="{ active: initialIndex === index }"
          >
            {{ item.initial }}
          </li>
        </ul>
      </div>
    </div>
    <!-- 歌手列表 -->
    <div class="singer-list container" v-loading="isLoading">
      <ul class="list-wrapper clearfix">
        <li v-for="(item, index) in singerList" :key="index">
          <div class="cover">
            <el-image :src="item.picUrl">
              <template slot="placeholder" class="image-slot">
                <img src="../../assets/images/timg.jpg" alt="" /> </template
            ></el-image>
          </div>
          <div class="info">
            <p class="name overflow2">{{ item.name }}</p>
            <p class="muisc-size">单曲数量{{ item.musicSize }}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { getSingerList } from '@/api/singer'
export default {
  name: 'singer',
  data () {
    return {
      isLoading: false,
      // 地区
      areaList: [
        { name: '全部', area: -1 },
        { name: '华语', area: 7 },
        { name: '欧美', area: 96 },
        { name: '日本', area: 8 },
        { name: '韩国', area: 16 },
        { name: '其他', area: 0 }
      ],
      areaIndex: 0,
      // 性别
      genderList: [
        { name: '全部', type: -1 },
        { name: '男歌手', type: 1 },
        { name: '女歌手', type: 2 },
        { name: '乐队', type: 3 }
      ],
      genderIndex: 0,
      // 首字母搜索
      initialList: [
        { initial: '热门', name: -1 },
        { initial: 'A', name: 'a' },
        { initial: 'B', name: 'b' },
        { initial: 'C', name: 'c' },
        { initial: 'D', name: 'd' },
        { initial: 'E', name: 'e' },
        { initial: 'F', name: 'f' },
        { initial: 'G', name: 'g' },
        { initial: 'H', name: 'h' },
        { initial: 'I', name: 'i' },
        { initial: 'J', name: 'j' },
        { initial: 'K', name: 'k' },
        { initial: 'L', name: 'l' },
        { initial: 'M', name: 'm' },
        { initial: 'N', name: 'n' },
        { initial: 'O', name: 'o' },
        { initial: 'P', name: 'p' },
        { initial: 'Q', name: 'q' },
        { initial: 'R', name: 'r' },
        { initial: 'S', name: 's' },
        { initial: 'T', name: 't' },
        { initial: 'U', name: 'u' },
        { initial: 'V', name: 'v' },
        { initial: 'W', name: 'w' },
        { initial: 'S', name: 's' },
        { initial: 'Y', name: 'y' },
        { initial: 'Z', name: 'z' },
        { initial: '其他', name: 0 }
      ],
      initialIndex: 0,
      //  歌手列表
      singerList: [],
      more: true
    }
  },
  methods: {
    // 首字母搜索
    selectInitial (item, index) {
      this.initialIndex = index
      this.offset = 1
      this.getSingers()
    },
    // 选择歌手地区
    selectArea (item, index) {
      this.areaIndex = index
      this.offset = 1
      this.getSingers()
    },
    // 选择性别
    selectGender (item, index) {
      this.genderIndex = index
      this.offset = 1
      this.getSingers()
    },
    // 获取歌手列表
    async getSingers () {
      this.isLoading = true
      if (this.more) {
        const _params = {
          limit: 60,
          type: this.genderList[this.genderIndex].type,
          area: this.areaList[this.areaIndex].area,
          initial: this.initialList[this.initialIndex].name,
          offset: (this.offset - 1) * 60
        }
        const res = await getSingerList(_params)
        this.singerList = res.artists
        this.more = res.more
        this.offset++
        this.isLoading = false
      }
    }
  },
  created () {
    this.offset = 1
    this.getSingers()
  }
}
</script>
<style lang="less" scpoed>
.singer {
  .top-category {
    color: #666666;
    margin-top: 20px;
    // 地区
    .singer-area {
      display: flex;
      font-size: 14px;
      height: 30px;
      margin: 15px 0;
      ul {
        li {
          cursor: pointer;
          padding: 0 20px;
          line-height: 30px;
          float: left;
          border-radius: 4px;
          &:hover {
            color: @main-font-color;
          }
          &.active {
            background-color: @main-font-color;
            color: #fff;
          }
        }
      }
    }
    // 性别
    .singer-gender {
      display: flex;
      font-size: 14px;
      height: 30px;
      margin: 15px 0;
      ul {
        li {
          cursor: pointer;
          padding: 0 20px;
          line-height: 30px;
          float: left;
          border-radius: 4px;
          &:hover {
            color: @main-font-color;
          }
          &.active {
            background-color: @main-font-color;
            color: #fff;
          }
        }
      }
    }
    // 首字母
    .initial-list {
      display: flex;
      font-size: 14px;
      height: 30px;
      ul {
        li {
          &:nth-child(1) {
            padding: 0 20px;
            border-radius: 4px;
            width: auto;
            margin: 0;
          }
          cursor: pointer;
          line-height: 30px;
          width: 30px;
          float: left;
          text-align: center;
          border-radius: 4px;
          margin: 0 8px;
          &:hover {
            color: @main-font-color;
          }
          &.active {
            background-color: @main-font-color;
            color: #fff;
          }
        }
      }
    }
  }
  // 歌手列表
  .singer-list {
    padding-top: 15px;
    .list-wrapper {
      width: 100%;
      li {
        width: 10%;
        text-align: center;
        padding: 0 15px 30px;
        float: left;
        .cover {
          width: 100%;
          height: 105px;
          border-radius: 8px;
          overflow: hidden;
          .el-image {
            cursor: pointer;
            width: 100%;
            height: 100%;
            display: block;
            transition: transform 0.6s;
            &:hover {
              transform: scale(1.1);
            }
            img {
              width: 100%;
              height: 100%;
              display: block;
            }
          }
        }
        .info {
          margin-top: 15px;
          p {
            margin: 0;
            &.name {
              cursor: pointer;
              font-size: 14px;
              font-weight: 600;
              color: #4a4a4a;
            }
            &.muisc-size {
              margin-top: 10px;
              font-size: 12px;
              color: @main-font-color;
            }
          }
        }
      }
    }
  }
}
</style>
